<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>
		</title>
		<script src="{{__PUBLIC__}}/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/hdjs/hdjs.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/bootstrap/css/bootstrap-theme.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/bootstrap/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="{{__VIEW__}}/Message/message.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/hdjs/hdjs.css"/>
		<script src="{{__VIEW__}}/Message/message.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="page-header">
				<h1>
					<small>消息管理 </small>
				</h1>
				<a href="">
					<h4>
						全部消息
					</h4>
				</a>
				<a href="">
					<h4>
						已收藏的消息
					</h4>
				</a>
				<div class="col-lg-4" style="float: right;">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="消息内容">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">
								<span class="glyphicon glyphicon-search">
								</span>
							</button>
						</span>
					</div><!-- /input-group -->
				</div><!-- /.col-lg-6 -->
			</div>
		</div>
		<div class="container">
			<!-- Single button -->
			<div class="btn-group">
				<button type="button" style="width: 130px; position: relative; text-align: left;text-indent: 10px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					最近五天
					<span class="caret" style="position: absolute;right: 10px;top: 50%;">
					</span>
				</button>
				<ul class="dropdown-menu">
					<li>
						<a href="#">
							Action
						</a>
					</li>
					<li>
						<a href="#">
							Another action
						</a>
					</li>
				</ul>
			</div>
			<div style="padding: 10px 0;">
				<p style="display: inline-block;">
					全部消息<span style="color:#8D8D8D">(文字消息保存5天，其它类型消息只保存3天)</span>
				</p>
				<div class="checkbox" style="display: inline-block;margin-left: 100px;">
					<label>
						<input type="checkbox">
						隐藏关键词消息
					</label>
				</div>
			</div>
			<div id='main' class="panel panel-default">
				<div class="panel-body">
					<ul class="list-group">
						{{foreach from="$data" key="$k" value="$v"}}
						<li class="list-group-item" style="position: relative;margin-bottom: 10px;">
							<a href="" class='showinfo' style="position:relative;margin-left: 10px;display: inline-block;">
								<img style="width: 48px;height: 48px;" src="{{$v['headimgurl']}}"/>
							</a>
							<div id="userinfo">
								<a href="" class="username">
									{{$v['nickname']}}
								</a>
								<p class="date">
									{{date('Y-m-d',$v['CreateTime'])}}
								</p>
								<p class="reply">
									已回复
								</p>
								<a href="" class="star glyphicon glyphicon-star">
								</a>
								<a href="javascript:;" title="快捷回复" class="arrow glyphicon glyphicon-share-alt" onclick="showMessageModal('{{$v['openid']}}')">
								</a>
							</div>
							<p class="user_message">
								{{$v['Content']}}
							</p>							
						</li>
						{{endforeach}}
						<li class="list-group-item" style="padding: 30px 0;">
						</li>						
					</ul>
				</div>
				<nav style="width: 100%;display: block;">
				  <ul class="pagination" style="margin: 15px 200px;">
				    {{$page}}
				  </ul>
				</nav>
			</div>
		</div>
		<div id="editor">
			<form action="" id="form">
				<input type="hidden" id="openid" name="openid"/>
				<textarea name="Content" id="textarea" cols="30" rows="10"></textarea>
				<input type="submit" id="btn btn-success" value="回复"/>
			</form>			
		</div>
		<script type="text/javascript">
			function showMessageModal(openid) {
			$("#openid").val(openid);
		}
	//提交回复
		ajaxPost("{{U('reply')}}", 'form', 'btn', '', function() {
			$("#textarea").val('');
			$("#editor").hide();
		});
		</script>
		<style type="text/css">
				#form{
					padding: 30px 20px 30px 100px;
					width: 100%;
					height: 100%;
				}
				textarea{
					width: 100%;
					height: 80%;
				}
				#form #btn{
					
					width: 100px;
					height: 60px;
					padding: 30px;
					background: #5ACF00;
				}
			</style>
		
		<div id="" style="height: 200px;">
		</div>
		<script type="text/javascript">
		var t = 35;
		$(function() {

		$('.showinfo').hover(function() {
			var show = this;
			$.post("{{U('getInfo')}}",{id:$(this).attr('val')},function(data){

				var info = '<div id="info">\
			<table class="table" style="border: none;">\
				<tr>\
					<td colspan="2">'+data.nickname+'</td>\
				</tr>\
				<tr>\
					<td>备注名</td>\
					<td>'+data.remark+'</td>\
				</tr>\
				<tr>\
					<td>地区	</td>\
					<td>'+data.country+'&nbsp;&nbsp;'+data.province+'&nbsp;&nbsp;'+data.city+'</td>\
				</tr>\
				<tr>\
					<td>签名</td>\
					<td>'+t+'</td>\
				</tr>\
				<tr>\
					<td>分组	</td>\
					<td>\
						<div class="btn-group" style="display: inline-block;margin-left: 0px;">\
							<button type="button" style="width: 130px; position: relative; text-align: left;text-indent: 10px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加到	<span class="caret" style="position: absolute;right: 10px;top: 50%;"></span>\
							</button>\
							<ul class="dropdown-menu">\
								<li>\
									<a href="#">Action</a>\
								</li>\
								<li>\
									<a href="#">Another action</a>\
								</li>\
							</ul>\
						</div>\
					</td>\
				</tr>\
				<tr>\
					<td></td>\
					<td>\
						<button type="button" class="btn btn-default" style="margin-left: 0px;padding: ;">加入黑名单</button>\
					</td>\
				</tr>\
			</table>\
		</div>';
		$(show).prepend(info);
			},'json')

		}, function() {
			$(this).find('#info').remove();
		});
	});
	</script>
	</body>
</html>